<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<div id="app">
		<input v-model="wd" name="wd"><input type="button" @click="getStudents(1)" value="搜索"/>
		{{message}}
		<table>
			<caption>{{pi.total}}</caption>
			<thead>
				<tr>
					<th>学号</th>
					<th>姓名</th>
					<th>年龄</th>
					<th>编辑</th>
				</tr>
			</thead>
			<tbody>
				<tr v-for="stu in pi.list">
					<td>{{stu.stuId}}</td>
					<td>{{stu.stuName}}</td>
					<td>{{stu.stuAge}}</td>
					<td>
						<a :href="'/delete/' + stu.stuId">删除</a>|
						<a :href="'/update/'+ stu.stuId">修改</a>
					</td>
				</tr>
			</tbody>
		</table>
		<div>
			<a href="#" v-for="n in pi.navigatepageNums" @click.prevent="getStudents(n)">{{n}}</a>
			共{{pi.total}}条
		</div>
	</div>

	<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.js"></script>
	<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.19.2/axios.js"></script>
	<script type="text/javascript">
		var app = new Vue({
			  el: '#app',
			  data() {
				  return {
					  wd:'',
			    	  message: 'Hello Vue!',
				      pi: {total:0}
				   }
			  },
			  mounted(){
				  this.getStudents(1);
			  },
			  methods:{
				  getStudents:function(page){
					  axios.get('/students',{ 
					        params:{
					        	wd:this.wd,
					            p:page
					        }
					   }).then(response => (this.pi = response.data));
				  }
			  }
		})
	</script>
</body>
</html>